<template>
    <div>

        <el-table ref="multipleTable" :data="userList" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">

            <el-table-column type="selection" width="55"></el-table-column>

            <el-table-column prop="email" label="邮箱" ></el-table-column>
            <el-table-column prop="name" label="登录名" ></el-table-column>
            <el-table-column prop="qq" label="QQ" ></el-table-column>
            <el-table-column prop="phone" label="手机" width="120"></el-table-column>
            <el-table-column prop="sex" label="性别" width="120"></el-table-column>
            <el-table-column prop="nickname" label="真实名字" width="120"></el-table-column>


            <!--<el-table-column label="真实名字" width="120">-->
                <!--<template scope="scope">{{ scope.row.nickname }}</template>-->
            <!--</el-table-column>-->

            <el-table-column prop="wechat" label="微信号" show-overflow-tooltip>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-button @click="toggleSelection([userList[1], userList[2]])">切换第二、第三行的选中状态</el-button>
            <el-button @click="toggleSelection()">取消选择</el-button>
        </div>

    </div>
</template>

<script>
//    import jhTools2 from '../jh_tools.js'
    export default {

        data: function () {
            return{
                multipleSelection: [],
                userList: []
            }
        },

        created: function () {
            this.getUsers()

        },
        methods: {
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            getUsers:function () {

                var vm = this
                vm.userList = []

                var userData = jhTools.axios().get('/api/v1/users')
                    .then(function (response) {
                        // return response.data.data.items
                        vm.userList = (response.data.data.items)
                    })
                    .catch(function (error) {
                        //vm.answer = 'Error! Could not reach the API. ' + error
                        // return error;
                        vm.userList = [];

                    })


//                return vm.userList;
            }
        }
    }
</script>